<style>
	html {
		/*background: #38a8d1;*/
		/*background: -moz-linear-gradient(top, #e8eaf6 0%, #c5cae9 50%, #8c9eff 100%);*/
		/*background: -webkit-linear-gradient(top, #e8eaf6 0%, #c5cae9 50%, #8c9eff 100%);*/
		/*background: -o-linear-gradient(top, #e8eaf6 0%, #c5cae9 50%, #8c9eff 100%);*/
		/*background: -ms-linear-gradient(top, #e8eaf6 0%, #c5cae9 50%, #8c9eff 100%);*/
		/*background: linear-gradient(to bottom, #e8eaf6 0%, #c5cae9 50%, #8c9eff 100%);*/
		/*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#38a8d1', endColorstr='#8645f7', GradientType=0);*/
		background: url("${pageContext.request.contextPath}/images/ship.jpg") no-repeat;
		background-size: 100% auto;
	}

	#frame_head {
		background: #3f51b5;
		height: 100px;
		width: 100%;
		margin: 0 0 0 0;
	}

	#Login_user {
		float: left;
		height: 100%;
		width: 7%;
		margin: 0;
		background: #2a394f;
		display: table;
	}

	#user_name {
		text-decoration: none;
		color: rgb(239, 244, 250);
		font-size: 24px;
		text-align: center;
		display: table-cell;
		vertical-align: middle;
		height: 100%;
		margin: 0;
		padding: 0;
		transition-property: background-color, color;
		transition-duration: 1s;
		transition-timing-function: ease-out;
		-webkit-transition: -webkit-transform 2s;
		transition: transform 2s;
	}

	#Hi {
		color: rgb(239, 244, 250);
		font-size: 24px;
		text-align: center;
		display: table-cell;
		vertical-align: middle;
		height: 100%;
		margin: 0;
		padding: 0;
	}

	#user_name:hover {
		transform: scale(1.5);
		transition-duration: 1s;
		transition-timing-function: ease-out;
	}

	#head_title {
		margin: 0;
		padding: 30px 10px 10px 10px;
		text-align: center;
		color: white;
	}

	#section {
		/*position: fixed;*/
		/*left: Calc((100% - 650px) / 2);*/
		/*width: 650px; !* nav 4 个的时候 *!*/
		margin: 0 auto 0 auto;
	}

	#nav_ul {
		border-bottom: 2px solid darkgrey;
		position: relative;
		width: 100%;
		padding: 0;
		margin: 0 auto 0 auto;
		/*z-index: 100;*/
		height: 40px;
	}

	#nav_ {
		/*height: 40px;*/
		width: 100%;
		/*background: #3f51b5;*/
	}

	#nav_ul {
		background: #3f51b5;
	}

	#nav_ul a li {
		list-style: none;
		width: 160px; /* nav一个的大小 */
		height: 40px;
		float: left;
		text-align: center;
		font-family: Helvetica, sans-serif;
		border: 1px dashed rgba(255, 255, 255, 0);
		color: #e8eaf6;
		font-weight: 600;

		display: -webkit-box;
		-webkit-box-pack: center;
		-webkit-box-align: center;
		-webkit-box-orient: vertical;

		cursor: pointer;
		transition: all .2s;
		-webkit-transition: all .2s;
		/*background: #3f51b5;*/

	}

	#nav_ul a li:hover {
		/*border:1px dashed #fff;*/
		background: #536dfe;
	}

	/*#nav_ #div_ {*/
	/*position: absolute;*/
	/*left: 0;*/
	/*top: 16px;*/
	/*width: 142px;*/
	/*height: 58px;*/
	/*z-index: 99;*/
	/*}*/

	.li_active {
		color: rgba(55, 186, 177, 1);
	}

	#frame_body {

	}

	.bg_img {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		min-height: 1000px;
		min-width: 1000px;
		z-index: -10;
		zoom: 1;

		background-size: cover;
		-webkit-background-size: cover;
		-o-background-size: cover;
		background-position: center 0;

	}

	#body_background {
		background-color: #eae8f6;
		margin-top: 80px;
		width: 100%;

		overflow-x: hidden;
		overflow-y: scroll;

		max-height: 700px;

	}

	#frame_foot {

		display: inline-block;
		width: 100%;
		position: fixed;
		bottom: 0px;
		left: 0px;
	}

	#footer_font {
		font-size: 16px;
		color: #f7f7f7;
		text-align: center;
		margin: 0;
	}

	#footer_copyright {
		float: left;
		width: 50%;
		background: darkgrey;
		line-height: 70px;
	}

	#footer_div_a {
		width: 50%;
		float: right;
	}

	.footer_a {
		text-decoration: none;
		color: white;
		text-align: center;
		font-weight: bold;
		float: left;
		line-height: 70px;
	}

	#footer_a_1 {
		background-color: #3f51b5;
		font-size: 16px;
		width: 25%;
		transition: 1s;
		height: 70px;
	}

	#footer_a_1:hover {
		background-color: #222;
	}

	#footer_a_2 {
		background-color: #304ffe;
		font-size: 16px;
		width: 25%;
		transition: 1s;
		height: 70px;
	}

	#footer_a_2:hover {
		background-color: #222;
	}

	#footer_a_3 {
		background-color: #5f6dfe;
		font-size: 16px;
		width: 25%;
		transition: 1s;
		height: 70px;
	}

	#footer_a_3:hover {
		background-color: #222;
	}

	#footer_a_4 {
		background-color: #7986cb;
		font-size: 16px;
		width: 25%;
		transition: 1s;
		height: 70px;
	}

	#footer_a_4:hover {
		background-color: #222;
	}

	.tip {
		font-family: 'Indie Flower';
		position: absolute;
		color: rgb(117, 117, 117);
		margin: 10px 5px;
	}
</style>
<%--<div id="bg"></div>--%>
<div id="frame_head">
	<%--<a href="testmanage_departments.html">--%>
	<%--<div id="Login_user">--%>
	<%--<p id="Hi">Hi</p>--%>
	<%--<p id="user_name">Jason</p>--%>
	<%--</div>--%>

	<%--</a>--%>

	<h1 id="head_title">Ant Express</h1>
</div>

<!--<div id="frame_margin">-->

<!--</div>-->

<section id="section">
	<nav id="nav_">
		<div>
			<ul id="nav_ul">
				<a class="a_font" href="${pageContext.request.contextPath}/admin/index">
					<li class="nav_li">Admin Home</li>
				</a>
				<a class="a_font" href="${pageContext.request.contextPath}/admin/permission_groups">
					<li class="nav_li">Permission Management</li>
				</a>
				<a class="a_font" href="${pageContext.request.contextPath}/admin/manage_departments">
					<li class="nav_li">Department Management</li>
				</a>
				<a href="${pageContext.request.contextPath}/admin/manage_designations">
					<li>Designation Management</li>
				</a>
				<a href="${pageContext.request.contextPath}/admin/manage_users">
					<li>User Management</li>
				</a>
				<a class="a_font" href="${pageContext.request.contextPath}/logout">
					<li class="nav_li">Logout</li>
				</a>
			</ul>
		</div>
	</nav>
</section>


<%--<div>--%>
<%--<ul>--%>
<%--<li><a href="${pageContext.request.contextPath}/admin/index">Admin Home</a></li>--%>
<%--<li><a href="${pageContext.request.contextPath}/admin/permission_groups">Permission Management</a></li>--%>
<%--<li><a href="${pageContext.request.contextPath}/admin/manage_departments">Department Management</a></li>--%>
<%--<li><a href="${pageContext.request.contextPath}/admin/manage_designations">Designation Management</a></li>--%>
<%--<li><a href="${pageContext.request.contextPath}/admin/manage_users">User Management</a></li>--%>
<%--<li><a href="${pageContext.request.contextPath}/logout">Logout</a></li>--%>
<%--</ul>--%>
<%--</div>--%>
<%--<%@include file="header.html"%>--%>
<%--<div id="frame_body">--%>